<template>
    <el-form :model="Form" :rules="rule" ref="From" label-width="120px" class="demo-ruleForm">
      <el-row>

        <el-col :span="24" style="margin-top: 50px;margin-bottom: 50px;">
        <el-button type="primary" @click="save()">提交</el-button>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文章标题" prop="article_title">
            <el-input v-model="Form.article_title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-col :span="8">
          <el-form-item label="文章来源" prop="article_from">
            <el-radio-group v-model="Form.article_from">
              <el-radio :label="0" >原创</el-radio>
              <el-radio :label="1" >转载</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="文章类型" prop="article_type">
            <el-select v-model="Form.article_type" placeholder="文章类型" filterable>
              <el-option
                  v-for="item in article_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="文章标签" prop="label">
            <el-select v-model="Form.label" placeholder="文章标签" multiple filterable>
              <el-option
                  v-for="item in label"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
            <el-form-item label="文章描述" prop="article_description">
              <el-input  type="textarea"  v-model="Form.article_description"  placeholder="请输入描述" maxlength="250" show-word-limit></el-input>
            </el-form-item>
          </el-col>

        <WangEditor ref="sendWangEditor" v-model="Form.wangEditor" ></WangEditor>
      </el-row>
    </el-form>
</template>

<script>
// <!--  提交文章  -->
    import WangEditor from "@/components/wangEditor/WangEditor";
    import {getBaseArticleTypes, getBaseLabels,articleSave} from "@/api/api";
    export default {
        name: "SubmitArticle",
       data(){
           return {
               //文章类型
               article_type:[],
               // 标签
               label:[],
               Form: {
                   article_title:'',
                   article_type:"",
                   //文章标签
                   article_label:"",
                   article_description:"",
                   article_from: 0,
                   wangEditor: '',

               },
               rule: {
                  article_title: [{max:50,required: true,trigger: 'blur',message:'文章标题必填'}],
                  article_type:[{required: true,message:'文章类型必填'}],
                  article_description:[{max:250,required: true,trigger: 'blur',message:'文章描述必填'}],
                  article_from:[{required: true,message:'文章来源必填'}],
               }
           }
       },
        components: {
            WangEditor
        },
        methods:{
          getBaseArticleTypes(){
            getBaseArticleTypes().then((res) =>{
              if (res.code === 200){
                let options = [
                  {
                    label: '',
                    value: ''
                  }
                ];
                this.$.each(res.data,(index,values)=>{
                  options.push({
                    label: values.article_type_id + '--' + values.article_type_name,
                    value:values.article_type_name
                  })
                })
                this.article_type = options;
              }
            }).catch(error =>{
              this.$message({
                type:'error',
                message:error.message || 'Error'
              });
            })
          },
          getBaseLabels(){
            getBaseLabels().then((res) =>{
              if (res.code === 200){
                let options = [
                  {
                    label: '',
                    value: ''
                  }
                ];
                this.$.each(res.data,(index,values)=>{
                  options.push({
                    label: values.label_id + '--' + values.label_name,
                    value: values.label_id
                  })
                })
                this.label = options;
              }
            }).catch(error =>{
              this.$message({
                type:'error',
                message:error.message || 'Error'
              });
            })
          },

          save(){

            this.$refs.From.validate((validate)=>{
              if (validate){
                // 将wangEditor 的值赋给父类
                this.Form.wangEditor = this.$refs.sendWangEditor.html;
                console.log(this.Form);
                articleSave(this.Form).then((res)=>{
                    console.log('res',res);
                    this.Form =  {
                    article_title:'',
                        article_type:"",
                        //文章标签
                        article_label:"",
                        article_description:"",
                        article_from: 0,
                        wangEditor: '',
                  };
                  this.$message.success('提交成功');
                }).catch(error =>{
                  this.$message.error(error.message || 'Error');
                })
              }
            })

            // console.log("this.$refs.sendWangEditor.html",this.$refs.sendWangEditor.html);



          }
        },
        created() {
          this.getBaseArticleTypes();
          this.getBaseLabels();
        }

    }
</script>

<style scoped>

</style>